<script setup>
import {reactive} from "vue";
import request from "@/utils/request";

const state = reactive({
  notice: []
})

const load = () => {
  request.get("/notice").then(res => {
    state.notice = res.data
  })
}
load()

function filterTime(time) {
  var date = new Date(time);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  var h = date.getHours();
  h = h < 10 ? "0" + h : h;
  var minute = date.getMinutes();
  minute = minute < 10 ? "0" + minute : minute;
  var s = date.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + "-" + m + "-" + d  + " " + h + ":" + minute;
}

</script>

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div>
              <span>Partner交友网后台管理系统</span>
            </div>
          </template>
          <div>
            <div style="margin: 10px 0">
              互联网在今天已经渗透到人们日常学习、生活、工作的各个方面，越来越多的人每天都要在互联网上发布和获取信息。
              社会的日益开放和工作环境、形势的变化，人与人之间交往的载体相应的发生了变化，
              交友网站的设计丰富了许多朋友的业余文化生 活，给他们的生活带来更多的方便。

            </div>

            <div  style="margin: 10px 0">
              网络交友充分满足了人们的好奇与表现的心理，上网的人大都尝试过在聊天室或聊天软件中随意寻找网友的新奇。
              热衷于网络交友的人常会将一些不习惯向身边朋友倾诉 的内心问题，乐意地讲给从不谋面的网友或知心朋友听，通过倾诉使心理得到自我调节。
              网络交友为我们的生活开辟了新的空间，让我们超越了现实中交友的局限，让生活充满期待和变数。

            </div>
            <div style="margin: 14px 0;text-align: right;">
              <b style="color: SlateBlue;">Partner交友网</b>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div>
              <span>技术栈</span>
            </div>
          </template>
          <div style="display: flex">
            <div style="flex: 1; padding: 0 20px; line-height: 30px">
              <h3 style="font-weight: bold">后端</h3>
              <div>SpringBoot2</div>
              <div>Mybatis-Plus</div>
              <div>Sa-Token</div>
              <div>JWT</div>
              <div>Mysql</div>
              <div>...</div>
              <div>...</div>
            </div>
            <div style="flex: 1; padding: 0 20px;  line-height: 30px">
              <h3 style="font-weight: bold">前端</h3>
              <div>Vue3</div>
              <div>Pinia</div>
              <div>Element-Plus</div>
              <div>Axios</div>
              <div>WangEditor</div>
              <div>...</div>
              <div>...</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <div>
      <el-card style="width: 50%;  margin: 10px 0">
        <template #header>
          <div>
            <span>公告列表</span>
          </div>
        </template>
        <el-collapse accordion>
          <el-collapse-item v-for="(item,index) in state.notice" :key="item.id" :name="'' + index">
            <template #title>
              <span style="font-size: 20px;">{{ item.name }}</span>
              <span style="margin-left: 10px">{{ filterTime(item.createTime) }}</span>
            </template>
            <div v-html="item.content"></div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>